<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Ionic Item Sliding</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script src="../../../../../dist/ionic.js"></script>
</head>

<body>
  <ion-app>


    <ion-header>
      <ion-toolbar>
        <ion-title>Ionic CDN demo</ion-title>
        <ion-buttons slot="primary">
          <ion-button onclick="addItems()">Add Items</ion-button>
        </ion-buttons>
      </ion-toolbar>
      <ion-toolbar></ion-toolbar>
      <ion-toolbar></ion-toolbar>
      <ion-toolbar></ion-toolbar>
      <ion-toolbar></ion-toolbar>
    </ion-header>

    <ion-content>
      <p>
        <ion-button onclick="addItems()">Add Items</ion-button>
      </p>

      <ion-virtual-scroll id="virtual">
        <template>
          <ion-item>
            <ion-label></ion-label>
          </ion-item>
        </template>
      </ion-virtual-scroll>

      <ion-infinite-scroll threshold="100px" id="infinite-scroll">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

    </ion-content>
  </ion-app>

  <script>
    const items = Array.from({ length: 100 }, (x, i) => i);
    const virtual = document.getElementById('virtual');
    virtual.items = items;
    virtual.nodeRender = (el, cell) => {
      if (cell.type === 'item') {
        renderItem(el, cell.value);
      }
    };
    function renderItem(el, item) {
      el.querySelector('ion-label').textContent = item;
    }


    const infiniteScroll = document.getElementById('infinite-scroll');
    infiniteScroll.addEventListener('ionInfinite', async function () {
      const data = await getAsyncData();
      infiniteScroll.complete();
      addItems(data);
    });

    function addItems(append) {
      if (!append) {
        append = Array.from({ length: 10 }, (x, i) => "append" + i);
      }
      items.push(...append);
      virtual.checkEnd(append.length);
    }

    function getAsyncData() {
      return new Promise(resolve => {
        setTimeout(() => {
          const data = Array.from({ length: 10 }, (x, i) => "append" + i);
          resolve(data);
        }, 500);
      });
    }
  </script>
</body>

</html>
